<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        rect.r1{
            filter:url(#f1)
        }
    </style>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f1" filterUnits="" primitiveUnits="">
                <feGaussianBlur  stdDeviation="2" />
                <feOffset dx="2" dy="2" result="r1"/>
                <feMerge>
                    <feMergeNode in="r1"/>
                    <feMergeNode in="SourceGraphic"/>
                </feMerge>
            </filter>
        </defs>
        
        <rect class="r1" x="10" y="10" width="50" height="40" fill="#f00" />
    </svg>


    <script src="index.js"></script>
  </body>
</html>
